<template>
  <div class="risk-assessment-template">
    <dashboard-box :options="dashboardOptions" :title="title"> </dashboard-box>

    <card :isCustomHeader="true" style="margin-top: 20px">
      <template #header>
        <div class="title">
          <b>即将截止的任务</b>
          <!--todo  dashboardOptions[0].count-->
          <t-badge :count="deadlineTask" showZero>
            <div class="badge">.</div>
          </t-badge>
        </div>
        <!-- <span>11</span> -->
        <t-form action="" style="width: 25%">
          <t-form-item label="筛选"
            ><t-select
              v-model="filterValue"
              :options="filterOptions"
              :minCollapsedNum="2"
              multiple
              @change="onFilterChange"
          /></t-form-item>
        </t-form>
      </template>
      <template>
        <t-table rowKey="index" :data="data" :columns="columns" :size="size" :showHeader="false" cellEmptyContent="-">
          <template #icon="{ row }">
            <img class="icon" src="@/assets/risk-base/ass.png" alt="" v-if="row.taskKind <= 2" />
            <img class="icon" src="@/assets/risk-base/risk.png" alt="" v-else />
          </template>
          <template #taskInfo="{ row }">
            <div class="taskInfo">
              <div class="taskContent">
                <b v-show="row.taskKind === 1">评估填写</b>
                <b v-show="row.taskKind === 2">审核评估</b>
                <b v-show="row.taskKind === 3">风险处置</b>
                <b v-show="row.taskKind === 5">风险指派</b>
                <b v-show="row.taskKind === 4">风险审核</b>: <span class="taskName">{{ row.taskName }}</span>
                <p>备注：{{ row.comments }}</p>
              </div>
            </div>
          </template>
          <template #stopDate="{ row }">
            <span class="isDeadline">
              <p v-show="row.stopDate && new Date(row.stopDate.slice(0, 11)) < Date.now() - 8.64e7">已过期</p>
            </span>
            <template v-if="row.stopDate">
              <time-icon />
              <span class="p-deadline" style="margin-left: 3px">{{ row.stopDate.slice(0, 11) }}到期</span>
            </template>
            <span v-else class="p-deadline">未指派</span>
          </template>
        </t-table>
        <t-pagination
          v-model="pagination.defaultCurrent"
          :total="pagination.total"
          :page-size.sync="pagination.defaultPageSize"
          show-jumper
          style="margin-top: 20px"
          @change="paginationChange"
        />
      </template>
    </card>
  </div>
</template>
<script lang="jsx">
import DashboardBox from '@/components/DashboardBox/index.vue';
import Card from '@/components/Card/index.vue';
import { TimeIcon } from 'tdesign-icons-vue';
import { getBaseTableInfo } from '@/service/risk-assessment/base/index';

export default {
  name: 'riskAssessmentBase',
  components: {
    DashboardBox,
    Card,
    TimeIcon,
  },
  data() {
    return {
      title: '我的待办',
      // 待办显示的数据
      dashboardOptions: [
        {
          count: 0,
          title: '待办任务',
        },
        {
          count: 0,
          title: '评估待办',
        },
        {
          count: 0,
          title: '风险待办',
        },
        {
          count: 0,
          title: '已过期',
        },
      ],
      // 操作的关键词 筛选
      oprationkW: [],
      // 所有表格数据
      formData: [],
      // 页面展示的表格数据
      data: [],
      size: 'medium',
      columns: [
        {
          colKey: 'icon',
          width: 110,
        },
        {
          colKey: 'taskInfo',
          title: '任务信息',
          // width: 600,
          ellipsis: true,
          ellipsisTitle: false,
        },
        {
          colKey: 'stopDate',
          align: 'right',
          title: '到期时间',
          // width: 320,
          ellipsis: true,
          ellipsisTitle: false,
        },
        {
          colKey: 'operation',
          title: '操作',
          width: 100,
          cell: (h, { row }) => (
            <t-link hover="color" theme="primary" onClick={() => this.toOtherPage(row)}>
              查看
            </t-link>
          ),
        },
      ],
      // 分页
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: 0,
      },
      filterValue: [],
      filterOptions: [
        { label: '待填写评估', value: '1' },
        { label: '待审核评估', value: '2' },
        { label: '待处置风险', value: '3' },
        { label: '待审核风险', value: '4' },
        { label: '待指派风险', value: '5' },
        { label: '过期任务', value: '0' },
      ],
      deadlineTask: 0,
    };
  },
  mounted() {
    this.getTableInfo();
  },
  methods: {
    toOtherPage(row) {
      const { id, taskKind } = row;
      if (taskKind <= 2) {
        this.$router.push({ path: '/risk-assessment/management/answer', query: { id } });
      }
      if (taskKind >= 3) {
        let current;
        switch (taskKind) {
          // 处置
          case 3:
            current = '2';
            break;
          case 4:
            current = '3';
            break;
          default:
            current = '1';
            break;
        }
        this.$router.push({
          name: 'GovernanceProcedure',
          query: { id },
          params: { current },
        });
      }
    },
    async getTableInfo() {
      const res = await getBaseTableInfo();
      const { overviewVOS, qsToDo, rsToDo, overdue } = res.data;
      overviewVOS.forEach((item) => {
        const time = new Date(item.stopDate).getTime() - new Date().getTime();
        if (time / 1000 / 60 / 60 / 24 <= 7 && time / 1000 / 60 / 60 / 24 > 0) this.deadlineTask += 1;
      });
      this.dashboardOptions[0].count = qsToDo * 1 + rsToDo * 1 + overdue * 1 || 0;
      this.dashboardOptions[1].count = qsToDo || 0;
      this.dashboardOptions[2].count = rsToDo || 0;
      this.dashboardOptions[3].count = overdue || 0;
      this.formData = overviewVOS;
      this.pagination.total = this.formData.length;
      this.data = this.formData.slice(0, this.pagination.defaultPageSize);
    },
    // 分页跳转
    paginationChange(pageInfo) {
      const { current, pageSize } = pageInfo;
      if (this.oprationkW.length > 0) {
        const tempDatea = this.formData;
        const filterArr = tempDatea.filter((item) => {
          if (item.taskKind === 5) {
            return this.oprationkW.includes(String(item.taskKind));
          }
          if (this.oprationkW.includes('0')) {
            if (!item.stopDate) return false;
            return new Date() > Date.parse(item.stopDate) || this.oprationkW.includes(String(item.taskKind));
          }
          if (item.stopDate) return this.oprationkW.includes(String(item.taskKind));

          return this.oprationkW.includes(String(item.taskKind)) && new Date() < Date.parse(item.stopDate);
        });
        this.data = filterArr;
        this.pagination.total = filterArr.length;
        this.data = filterArr.slice(pageSize * (current - 1), pageSize * (current - 1) + pageSize);
        return;
      }
      this.data = this.formData.slice(pageSize * (current - 1), pageSize * (current - 1) + pageSize);
    },
    // 过滤
    onFilterChange(filters) {
      if (filters.length > 0) {
        this.pagination.defaultCurrent = 1;
        this.oprationkW = filters;
        const tempDatea = this.formData;
        const filterArr = tempDatea.filter((item) => {
          if (item.taskKind === 5) {
            return this.oprationkW.includes(String(item.taskKind));
          }
          if (this.oprationkW.includes('0')) {
            if (item.taskKind === 5 && !item.stopDate) return false;
            return new Date() > Date.parse(item.stopDate) || this.oprationkW.includes(String(item.taskKind));
          }
          if (item.stopDate) return this.oprationkW.includes(String(item.taskKind));
          return this.oprationkW.includes(String(item.taskKind)) && new Date() < Date.parse(item.stopDate);
        });
        this.data = filterArr;
        this.pagination.total = filterArr.length;
        this.data = filterArr.slice(0, this.pagination.defaultPageSize);
        return;
      }
      this.oprationkW = [];
      this.pagination.total = this.formData.length;
      this.pagination.defaultCurrent = 1;
      this.data = this.formData.slice(0, this.pagination.defaultPageSize);
    },
  },
};
</script>

<style lang="less" scoped>
.taskInfo {
  display: flex;
  .taskContent {
    width: 90%;
    text-overflow: ellipsis;
    .taskName {
      color: #0052d9;
    }
  }
}
.icon {
  width: 56px;
  margin-left: 1.5vw;
}
.badge {
  opacity: 0;
  margin: -12px 10px;
}
.p-deadline {
  vertical-align: middle;
  display: inline-block;
  padding-top: 1px;
}
.time-desc {
  text-align: center;
}
.isDeadline {
  display: inline-block;
  width: 10vw;
  padding-right: 30px;
  p {
    display: inline-block;
    padding: 0 8px;
    border-radius: 3px;
    font-size: 12px;
    border: 1px solid var(--td-error-color);
    background-color: var(--td-error-color-1);
    color: var(--td-error-color);
  }
}
</style>
